<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3.css">
    <title>热门推荐</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        img {
            width: 100%;
            height: inherit;
        }

        .bottom {
            font-size: 13px;
            color: #999999;
        }

        .button {
            padding: 0;
            float: right;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both;
        }

        .box{
            height: auto;
            margin: 2px auto;
        }
        .box ul{
            height: auto;
            margin: 2px auto;
        }
        .box ul li{
            width: 100%;
            height: auto;
            float: left;
        }

        ol{
            /*list-style-type: none;*/
            counter-reset: sectioncounter;
        }

        ol li:before{
            content: counter(sectioncounter) "、";
            counter-increment: sectioncounter;
        }

    </style>
</head>

<body>
<div id="app">
    <template>
        <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item v-for="item in imgList" :key="item.id">
                <img :src="item.id" class="image">
            </el-carousel-item>
        </el-carousel>
    </template>

    <h2>编辑推荐</h2>
    <el-row :gutter="12">
        <el-col :span="4">
            <el-card shadow="hover" style="width:200px">
                <img src="../image/medicine.jpg">
                <div style="padding: 5px">
                    <span style="font-size: small">医学心理学</span>
                    <div class="bottom clearfit">
                        <el-button onclick="window.location.href='display.html'" type="button" class="button">查看
                        </el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card shadow="hover" style="width:200px;height:235px ">
                <img src="../image/sport.jpg">
                <div style="padding: 5px">
                    <span style="font-size: small">大学体育</span>
                    </br>
                    </br>
                    </br>
                    <div class="bottom clearfit">
                        <el-button onclick="window.location.href='display.html'" type="button" class="button">查看
                        </el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card shadow="hover" style="width:200px;height:235px">
                <img src="../image/lisanshuxue.png">
                <div style="padding: 5px">
                    <span style="font-size: small">离散数学</span>
                    </br>
                    </br>
                    </br>
                    </br>
                    <div class="bottom clearfit">
                        <el-button onclick="window.location.href='display.html'" type="button" class="button">查看
                        </el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card shadow="hover" style="width:200px">
                <img src="../image/physics2.jpg">
                <div style="padding: 5px">
                    <span style="font-size: small">大学物理(下)</span>
                    <div class="bottom clearfit">
                        <el-button onclick="window.location.href='display.html'" type="button" class="button">查看
                        </el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card shadow="hover" style="width:200px;height:235px">
                <img src="../image/sport.jpg">
                <div style="padding: 5px">
                    <span style="font-size: small">大学体育</span>
                    </br>
                    </br>
                    </br>
                    <div class="bottom clearfit">
                        <el-button onclick="window.location.href='display.html'" type="button" class="button">查看
                        </el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card shadow="hover" style="width:200px">
                <img src="../image/HTML5.jpg">
                <div style="padding: 5px">
                    <span style="font-size: small">HTML5</span>
                    <div class="bottom clearfit">
                        <el-button onclick="window.location.href='display.html'" type="button" class="button">查看
                        </el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <h2>本周课程排行</h2>
    <template>
        <div class="container" style="display: inline-block">
                <div class="w3-panel w3-border" style="width: 300px;display: inline-block;background: linear-gradient(lemonchiffon,white)">
                    <span style="color: orange" ><h4><strong>热门排行</strong></h4></span>
                    <span style="color: gainsboro" ><h4>POPULAR COURSES</h4></span>
                    <div class="box" style="margin: 5px;padding: 3px;border: 3px">
                        <ul>
                            <ol>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            </ol>
                        </ul>
                    </div>
                </div>

                <div class="w3-panel w3-border" style="width: 300px;display: inline-block;background: linear-gradient(lemonchiffon,white)">
                    <span style="color: orange"><h4><strong>新课排行</strong></h4></span>
                    <span style="color: gainsboro"><h4>NEW COURSES</h4></span>
                    <div class="box" style="margin: 5px;padding: 3px;border: 3px">
                        <ul>
                            <ol>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            </ol>
                        </ul>
                    </div>
                </div>

                <div class="w3-panel w3-border" style="width: 300px;display: inline-block;background: linear-gradient(lemonchiffon,white)">
                    <span style="color: orange"><h4><strong>好评排行</strong></h4></span>
                    <span style="color: gainsboro"><h4>HIGN PRAISE</h4></span>
                    <div class="box" style="margin: 5px;padding: 3px;border: 3px">
                        <ul>
                            <ol>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            <li style="list-style: none"><a href="display.html"><img src="../image/math1.png"></a>&nbsp;</li>
                            </ol>
                        </ul>
                    </div>
                </div>
        </div>


    </template>

</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                imgList: [
                    {id: 0, id: '../image/fl.jpg'},
                    {id: 1, id: '../image/yiyuzheng.png'},
                    {id: 2, id: '../image/zhongyaoxue.jpg'},
                    {id: 3, id: '../image/fuzhuang.png'},
                    {id: 4, id: '../image/guojishangwu.png'},
                    {id: 5, id: '../image/riyu.jpg'},
                ]
            };
        }
    })
</script>
</html>